<template>
  <el-popover :teleported="false" placement="bottom" trigger="click">
    <template #reference>
      <slot />
    </template>
    <template #default>
      <div class="selector">
        <span
          class="option"
          :class="{ active: i === 0 }"
          v-for="(item, i) in options"
          :key="item"
          @click="onClickOption(item)"
        >
          {{ item }}
        </span>
      </div>
    </template>
  </el-popover>
</template>

<script setup lang="ts">
defineProps<{
  options: Array
}>()

const $emit = defineEmits<{
  onClickOption: (val: any) => void
}>()
const onClickOption = (val) => {
  $emit('onClickOption', val)
}
</script>

<style scoped lang="scss"></style>
